<% if previous_cards.any? %>
  <div class="card my-3">
    <div class="card-header">
      <h5 class="card-title mb-0 h6"><%= Spree.t(:previously_used_card) %></h5>
    </div>
      <div class="form-group previous_cards card-body mb-0">
        <ul class="m-0 p-0">
            <% previous_cards.each do |card| %>
              <li>
                <label>
                  <%= radio_button_tag :card, card.id, card == previous_cards.first %> <%= card.display_brand + ' - ' + card.display_number %>
                </label>
              </li>
            <% end %>
            <li>
              <hr>
              <label>
                <%= radio_button_tag :card, 'new', false, { id: "card_new#{payment_method.id}" } %> <%= Spree.t(:use_new_cc) %>
            </label>
          </li>
        </ul>
      </div>
  </div>
<% end %>

<div id="card_form<%= payment_method.id %>" class="mt-3 row">
  <% param_prefix = "payment_source[#{payment_method.id}]" %>

  <div class="form-group col-12">
    <%= hidden_field_tag "#{param_prefix}[cc_type]", '', {class: 'ccType'} %>
    <%= label_tag "card_number#{payment_method.id}", raw(Spree.t(:card_number) + required_span_tag) %>
    <%= text_field_tag "#{param_prefix}[number]", '', class: 'required form-control cardNumber', id: "card_number#{payment_method.id}", maxlength: 19 %>
    <span id="card_type" style="display:none;">
      ( <span id="looks_like"><%= Spree.t(:card_type_is) %> <span id="type"></span></span>
        <span id="unrecognized"><%= Spree.t(:unrecognized_card_type) %></span>
      )
    </span>
  </div>

  <div class="form-group col-12">
    <%= label_tag "card_name#{payment_method.id}", raw(Spree.t(:name) + required_span_tag) %>
    <%= text_field_tag "#{param_prefix}[name]", '', id: "card_name#{payment_method.id}", class: 'required form-control', maxlength: 19 %>
  </div>

  <div class="form-group col-6">
    <%= label_tag "card_expiry#{payment_method.id}", raw(Spree.t(:expiration) + required_span_tag) %><br>
    <%= text_field_tag "#{param_prefix}[expiry]", '', id: "card_expiry#{payment_method.id}", class: "required cardExpiry form-control", placeholder: Spree.t(:card_expiration_placeholder) %>
  </div>

  <div class="form-group col-6">
    <%= label_tag "card_code#{payment_method.id}", raw(Spree.t(:card_code) + required_span_tag) %>
    <%= text_field_tag "#{param_prefix}[verification_value]", '', id: "card_code#{payment_method.id}", class: 'required form-control cardCode', size: 5 %>
  </div>
</div>
